<template>
    <div id="ProductDetail" class="product-detail">
        <h2>商品详情</h2>
        <el-container>
            <el-main>
                <el-row>
                    <el-col :span="12">
                        <!-- 大图展示 -->
                        <el-image v-if="product.images.length>0" :src="product.images[0].imageUrl" class="detail-image-large" alt="ProductImage"></el-image>
                        <!-- 小图展示 -->
                        <el-row :gutter="10" class="small-images" v-if="product.images.length > 1">
                            <el-col v-for="(pro, index) in product.images.slice(1)" :key="index" :span="8">
                                <el-image
                                    :src="pro.imageUrl"
                                    class="detail-image-small"
                                    alt="ProductImage">
                                </el-image>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-info">
                            <h1>{{ product.name }}</h1>
                            <p class="detail-price">{{ product.salePrice }}</p>
                            <p>{{ product.description }}</p>
                            <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10" ></el-input-number>
                            <div style="margin-top: 25px">
                                <el-button type="primary" @click="addToCart(`${product.productId}`)">加入购物车</el-button>
                                <el-button type="success" @click="buyNow(`${product.productId}`)">立即购买</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    props: ['proId'],
    name: "ProductDetail",
    data() {
        return {
            product: {
                images: [] // 确保 images 初始化为数组
            },
            num: 1,
        };
    },
    methods: {
        getProductId() {
            this.$axios.post(`product/getOne/${this.proId}`).then(r => {
                this.product = r.data;
                console.log('图片数据:', this.product.images);
                console.log('小图数据:', this.product.images.slice(1));
            });
        },
        handleChange(value) {
            if (value == 10){
                this.$message.error('一件商品最多只能加入10件');
            }else if(value==1){
                this.$message.error('最低要一件商品');
            }
        },

        // 加入购物车
        addToCart(productId) {
            let user = JSON.parse(sessionStorage.getItem('user'));//获取当前登录用户
            console.log(999,this.num)
            this.$axios.get(`carts/add/${productId}/${user.id}/${this.num}`).then(res => {
                if (res.data === 'yes') {
                    this.$message({
                        type: 'success',
                        message: '加入购物车成功'
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '加入购物车失败'
                    });
                }
            })
        },
        //立即结算
        buyNow(product) {
            console.log(`Buying ${product.name} now`);
        }
    },
    created() {
        this.getProductId();
    }
};
</script>

<style scoped>
.product-detail {
    padding: 20px;
}

.detail-image-large {
    width: 400px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.detail-image-small {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.small-images {
    margin-top: 10px;
}

.detail-info {
    padding: 20px;
}

.detail-price {
    font-size: 24px;
    color: #e60012;
    font-weight: bold;
    margin: 20px 0;
}
.small-images {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-image-small {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s;
    border: 1px solid #eee;
}

.detail-image-small:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>